<template>
<!-- 搜索框 -->
    <el-card shadow="never" style="margin-bottom: 14px;" :body-style="{ paddingBottom: '2px' }">

        <el-form  :inline="true">
            <el-form-item label="状态：">
                <el-cascader 
                :props="{
                   
                   checkStrictly: true,
                     label: 'name',
                     value: '_id',
       
       
                }" 
                
                clearable />
            </el-form-item>
            <el-form-item label="搜索">
                <el-input style="width: 250px;" placeholder="请输入姓名或者账号">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button        type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>



    <!-- 表格 -->

    <el-card shadow="never">
        <div class="hhd">
            <el-button type="primary" @click="openDialog">添加管理员</el-button>
        </div>

        <BaseTable :data="tableData.rows" 
        :total="tableData.total" 
        v-model="pageData"
         :columns="columns">





            <template #state="{ row }">
                <el-switch v-model="row.state" 
                inline-prompt active-text="开启" 
                inactive-text="关闭" :active-value="1"
                    :inactive-value="0"/>

               
            </template>

            <template #action="{ row }">
                <el-button @click="openDialog(row)">编辑</el-button>
                <el-button type="danger" plain>删除</el-button>
            </template>

        </BaseTable>
    </el-card>

    <AdminsDialog ref="AdminsRef" @getAdminsData="getAdminsData" />

</template>
<script setup lang="ts">
import { onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
import AdminsDialog from './AdminsDialog.vue';
import api from '@/api';
import { RoleItem } from '@/api/modules/roles';
const AdminsRef = useTemplateRef<InstanceType<typeof AdminsDialog>>('AdminsRef');
const columns = [
    { label: '管理员姓名', prop: 'name' },
    { label: '管理员账号', prop: 'account' },
    { label: '管理员密码', prop: 'password' },
    {label:'角色',prop:'role.name'},
    { label: '开启', prop: 'state' },
    { label: '操作', prop: 'action' }
]





let pageData = ref({
    pageSize: 10,
    currentPage: 1
})

let tableData = reactive({
    rows: [],
    total: 0
})


onMounted(() => {
    getAdminsData();
})

watch(pageData, () => {
    getAdminsData();
}, { deep: true })


const openDialog = (row?: RoleItem) => {

    AdminsRef.value!.onOpenDialog(row);


}


const getAdminsData = () => {
    api.admins.search({
        ...pageData.value
    }).then(res => {
        if (res.code == 200) {
            tableData.rows = res.data.rows;
            tableData.total = res.data.total;
        }
    })
}


















</script>

<style scoped>
.hhd {
    margin-bottom: 14px;
}
</style>